 <template>
  <div>
    <div class="filter-container" style="margin: 10px 0;">
      <el-input
        placeholder="机构名称/管理员电话"
        v-model="searchData"
        style="width: 200px;"
        class="filter-item"
      />

      <el-button class="filter-item" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <tTable :columns="columns" :data="tableData">
      <!-- 是否已激活 -->
      <template v-slot:activated="slotProps">
        <div>{{slotProps.scope.row.activated ? '是': '否'}}</div>
      </template>

      <!-- 交易金额 -->
      <template v-slot:operate="slotProps">
        <el-button
          @click.native.prevent="setOrgAccount(slotProps.scope.row.id)"
          type="info"
          size="mini"
        >增加全返账号</el-button>
        <el-button
          @click.native.prevent="deleteOrg(slotProps.scope.row.id)"
          type="danger"
          size="mini"
        >删除机构</el-button>
        <el-button
          @click.native.prevent="resetPassword(slotProps.scope.row.id)"
          type="danger"
          size="mini"
        >重置密码</el-button>
        <el-button
          @click.native.prevent="detailRow(slotProps.scope.row.id, slotProps.scope.row.infoName)"
          type="primary"
          class="add-style"
          size="mini"
        >账户明细</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import {
  getOrganization,
  resetPassword,
  deleteOrg,
  selectOrganization,
  setOrgAccount
} from "api/getData";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      searchData: "",
      total: -1,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "infoName", label: "机构名称" }
        },
        {
          attr: { prop: "phone", label: "管理员电话" }
        },
        {
          attr: { prop: "email", label: "管理员邮箱" }
        },
        {
          attr: { prop: "inviteCode", label: "机构码", width: "100" }
        },
        {
          attr: { prop: "freeAccountNumber", label: "全返账号余数"}
        },
        {
          slot: "activated",
          attr: { prop: "activated", label: "是否已激活", width: "100" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "450" }
        }
      ],
      pageNumber: 0,
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.getData(1);
  },
  methods: {
    deleteOrg: function(id) {
      this.$confirm("确认删除机构么？")
        .then(_ => {
          deleteOrg(id).then(res => {
            if (res.status === 403 && res.code === "100003") {
              this.$alert(res.message);
            } else {
              this.$message.success("删除成功");
              this.getData(1);
            }
          });
        })
        .catch(_ => {});
    },
    resetPassword: function(id) {
      resetPassword(id).then(res => {
        if (res.status === 403 && res.code === "100003") {
          this.$alert(res.message);
        } else {
          this.$alert("重置密码成功，新密码为123456");
        }
      });
    },
    setOrgAccount: function(id) {
      this.$prompt("请输入免费账号数目", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        setOrgAccount(id, value).then(res => {
          this.$message.success("设置成功");
          this.getData(this.pageNumber);
        });
      });
    },
    detailRow: function(id, name) {
      // 跳转到企业详情页面
      this.$router.push({
        path: "/account/detail/" + id,
        query: { name: name }
      });
    },
    activateMan: function(id) {
      // 跳转到企业详情页面
      this.$router.push("/organization/activate");
    },
    getData(pageNumber) {
      getOrganization(pageNumber).then(res => {
        this.tableData = res.content;
        this.total = res.totalElements;
      });
    },
    search: function() {
      selectOrganization(this.searchData).then(res => {
        this.tableData = res.content;
      });
    },
    handleChange: function(pageNumber) {
      this.pageNumber = pageNumber;
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
</style>
